@import "~styles/config.scss";

.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(https://sf3-ttcdn-tos.pstatp.com/obj/cc-static/1602680060391.jpg);
  background-size: 100% auto;
  animation: login-full-bg-data 150s cubic-bezier(0.21, 0.07, 0.88, 1.02)
    infinite;

  .logo {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;
    height: 30px;
    cursor: pointer;
    // filter: grayscale(1) brightness(1000%);
    img {
      height: 100%;
    }
  }

  .box {
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 25%;
    transform: translate(0, -50%);
    width: 400px;
    background: #fff;
    padding: 40px;
    .welcome {
      font-weight: bold;
      font-size: 22px;
    }

    .title {
      margin-top: 10px;
      color:$--color-text-secondary;
    }
    .form {
      margin-top: 15px;
      width: 100%;
      position: relative;
      z-index: 1;

      //background-color: hsla(0,0%,96%,.88);
    }

    .wrap {
      border-radius: 10px;
      // padding      : 10px 15px;

      // height: 350px;
    }

    .sub {
      padding: 10px 0px;
      .register{
        color: $--color-primary;
        font-size: 12px;
      }


      .forget {
        color: $--color-primary;
        font-size: 12px;
      }
      ::v-deep .el-input__inner {
        height: 42px;
      }
    }
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba($color: #000000, $alpha: 0.6);
  }
  .beian{
      position: fixed;
      bottom:0px; left:0px; width:100%;
      color:#fff;
      font-size: 12px;
      text-align: center;
      line-height:50px;
      z-index: 2;
  }
}

@keyframes login-full-bg-data {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -107.7455vw;
  }
}

.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
